<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <div class="header">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="100px"
            class="flex"
          >
            <el-form-item label="所属网点" prop="networkNameId">
              <el-select
                v-model="form.networkNameId"
                placeholder="请选择所属网点"
                style="width: 286px"
              >
                <el-option
                  v-for="item in networkList"
                  :key="item.id"
                  :label="item.networkName"
                  :value="item.networkName"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="结算科目" prop="settleSubjectId">
              <el-select
                v-model="form.settleSubjectId"
                placeholder="请选择结算科目"
                style="width: 286px"
              >
                <el-option
                  v-for="item in settleSubject"
                  :key="item.id"
                  :label="item.title"
                  :value="item.title"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="时间范围" prop="startTime">
              <dateymd :label="text" @update-date-range="dateChange" />
              <!-- <el-date-picker
                v-model="form.time"
                type="daterange"
                style="width: 600px"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateChange"
              /> -->
            </el-form-item>
            <el-form-item>
              <el-button class="cx" @click="search">查询</el-button>
              <el-button class="cz" @click="clear">重置</el-button>
            </el-form-item>

            <el-form-item label="结算类型" prop="settleType">
              <el-select
                v-model="form.settleType"
                placeholder="请选择结算类型"
                style="width: 286px"
              >
                <el-option label="客户" value="客户" />
                <el-option label="承包区" value="承包区" />
                <el-option label="业务员" value="业务员" />
              </el-select>
            </el-form-item>
            <el-form-item label="结算对象" prop="settleObject">
              <el-input
                v-model="form.settleObject"
                placeholder="请选择结算对象"
                style="width: 286px"
              />
            </el-form-item>
            <el-form-item label="收付类型" prop="nwReceiptPayType">
              <el-select
                v-model="form.nwReceiptPayType"
                placeholder="请选择收付类型"
                style="width: 286px"
              >
                <el-option label="应收下级" value="应收下级" />
                <el-option label="应付下级" value="应付下级" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否有效" prop="effectiveStatus">
              <el-select
                v-model="form.effectiveStatus"
                placeholder="请选择是否有效"
                style="width: 286px"
              >
                <el-option label="无效" value="无效" />
                <el-option label="有效" value="有效" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>

    <el-row type="flex" justify="space-between">
      <el-col :span="6">
        <div class="page">
          已选择
          <span>{{ multipleSelection.length }}</span>
          项/当前页共
          <span>{{ tableData.length }}</span>项
        </div>
      </el-col>
      <el-col :span="3">
        <div>
          <el-button class="del">新增</el-button>
          <el-button
            :disabled="!multipleSelection.length"
            class="del"
            @click="deleteData"
          >删除</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <elltable
            ref="multipleTable"
            :loading="loading"
            :data="tableData"
            :th="th"
            @selection-change="handleSelectionChange"
          >
            <template v-slot:before-columns>
              <el-table-column
                v-if="tableData.length > 0"
                type="selection"
                width="55"
              />
            </template>
          </elltable>
        </div>
      </el-col>
    </el-row>

    <div class="block" style="display: flex; justify-content: flex-end">
      <pagination
        :current-page="form.pageDate.pageNum"
        :page-size="form.pageDate.pageSize"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getOutletsList, settleSubjectList, storageChargeSearch, storageChargeDelete } from '@/api/dashboard'
import dateymd from '@/components/menuComponent/dateymd.vue'

export default {
  components: { dateymd },
  data() {
    return {
      multipleSelection: [],
      loading: false,
      settleSubject: [],
      text: 'hhh',
      form: {
        networkNameId: '',
        settleSubjectId: '',
        startTime: '',
        endTime: '',
        settleType: '',
        settleObject: '',
        effectiveStatus: '',
        pageDate: {
          pageNum: 1,
          pageSize: 10
        }
      },
      th: [],
      Time: '',
      currentPage: 1,
      tableData: [],
      pages: {
        pageNum: 1,
        pageSize: 1
      },
      total: 0,
      networkList: [],
      rules: {
        networkNameId: [
          { required: true, message: '请选择所属网点', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择日期', trigger: 'blur' }
        ]
      }

    }
  },
  created() {
    // this.getTabList()
    this.getOutLet()

    this.getSettleSubject()
  },
  methods: {
    // 删除
    async deleteData() {
      const ids = this.multipleSelection.map(item => item.id)
      // console.log(ids)
      const res = await storageChargeDelete(ids)
      console.log('删除', res)
      this.search()
    },

    // 获取网点列表
    getOutLet() {
      getOutletsList().then((res) => {
        if (res.code === 200) {
          this.networkList = res.data
        }
      })
    },
    // 获取结算科目
    getSettleSubject() {
      settleSubjectList().then((res) => {
        if (res.code === 200) {
          this.settleSubject = res.data
        }
      })
    },
    // 日期转换
    dateChange(value) {
      console.log('时间', value)
      this.form.startTime = value[0]
      this.form.endTime = value[1]
    },
    search() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          storageChargeSearch(this.form).then((res) => {
            this.loading = false
            if (res.code === 200) {
              // console.log('查询', res)
              this.tableData = res.data.list.data
              this.total = res.data.list.total
              this.th = res.data.fields
            } else {
              this.tableData = []
              this.total = 0
            }
          })
        }
      })
    },
    // 重置
    clear() {
      this.$refs.form.resetFields()
      this.text = 'clear'
    },
    handleSizeChange(val) {
      this.form.pageDate.pageSize = val
      this.form.pageDate.pageNum = 1
      this.search()
    },
    handleCurrentChange(val) {
      this.form.pageDate.pageNum = val
      this.search()
    },
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val
    }
  }

}
</script>

<style lang="scss" scoped>
.box {
  padding: 20px;
}

.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.cx {
  width: 80px;
  height: 42px;
  background: #2087d0;
  border-radius: 21px;
  color: #fff;
}
.cz {
  width: 80px;
  height: 42px;
  background: #ffffff;
  border-radius: 21px;
  border: 1px solid #666666;
  color: #333;
}
.del {
  width: 72px;
  height: 36px;
  border-radius: 18px;
  border: 1px solid #b4b4b4;
}
.el-button {
  padding: 0;
}
.page > span {
  color: #2087d0;
}
</style>
